<template>
	<view class="container">
		<view class="logo-area">
			<image class="logo" src="/static/logo.png"></image>
			<text class="app-name">圆梦银龄</text>
		</view>
		
		<view class="login-card">
			<view class="card-header">
				<text class="card-title">账号登录</text>
			</view>
			
			<view class="form-area">
				<view class="input-group">
					<text class="label">用户名</text>
					<input 
						class="input" 
						type="text" 
						v-model="username" 
						placeholder="请输入用户名" 
					/>
				</view>
				
				<view class="input-group">
					<text class="label">密码</text>
					<input 
						class="input" 
						type="password" 
						v-model="password" 
						placeholder="请输入密码" 
					/>
				</view>
				
				<button 
					class="login-btn" 
					:disabled="!username || !password" 
					@click="handleLogin"
				>登录</button>
				
				<view class="register-link" @click="goToRegister">
					<text>还没有账号？立即注册</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			handleLogin() {
				if (!this.username || !this.password) {
					uni.showToast({
						title: '请输入用户名和密码',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '登录中...'
				});
				
				// 调用登录API
				this.$api.login({
					username: this.username,
					password: this.password
				}).then(res => {
					uni.hideLoading();
					console.log('登录成功，返回数据:', res);
					
					// 保存token和用户信息
					uni.setStorageSync('token', res.access_token);
					uni.setStorageSync('userInfo', {
						id: res.user_id,
						username: res.username,
						avatar: res.avatar || ''
					});
					
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					
					// 跳转到首页
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1500);
				}).catch(err => {
					uni.hideLoading();
					console.error('登录失败:', err);
					
					// 显示详细错误信息
					let errorMsg = '登录失败';
					if (err.data && err.data.detail) {
						errorMsg = err.data.detail;
					} else if (err.errMsg) {
						errorMsg = err.errMsg;
					}
					
					uni.showToast({
						title: errorMsg,
						icon: 'none',
						duration: 2000
					});
				});
			},
			
			goToRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background-color: #f5f7fa;
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.logo-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 80rpx;
		margin-bottom: 60rpx;
	}
	
	.logo {
		width: 180rpx;
		height: 180rpx;
		margin-bottom: 30rpx;
		border-radius: 36rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
	}
	
	.app-name {
		font-size: 46rpx;
		font-weight: bold;
		color: #333;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}
	
	.login-card {
		width: 100%;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
	}
	
	.card-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f2f5;
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
	}
	
	.form-area {
		padding: 40rpx;
	}
	
	.input-group {
		margin-bottom: 40rpx;
	}
	
	.label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
	}
	
	.input {
		width: 100%;
		height: 90rpx;
		background-color: #f9fafc;
		border-radius: 45rpx;
		padding: 0 40rpx;
		font-size: 32rpx;
		color: #333;
		box-sizing: border-box;
	}
	
	.login-btn {
		width: 100%;
		height: 90rpx;
		background: linear-gradient(135deg, #3b73d9, #6159e6);
		color: #fff;
		border-radius: 45rpx;
		margin-top: 60rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(97, 89, 230, 0.25);
		border: none;
		transition: all 0.3s ease;
	}
	
	.login-btn:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 10rpx rgba(97, 89, 230, 0.2);
	}
	
	.login-btn[disabled] {
		background: linear-gradient(135deg, #cccccc, #aaaaaa);
		box-shadow: none;
	}
	
	.register-link {
		margin-top: 30rpx;
		text-align: center;
	}
	
	.register-link text {
		color: #6159e6;
		font-size: 28rpx;
	}
</style> 